import React from 'react';
import { getUserRole, getUserPhone, isAdmin, isUser } from '../utils/permission';
import { Button } from 'antd-mobile';

const PermissionTest: React.FC = () => {
  const userRole = getUserRole();
  const userPhone = getUserPhone();
  const isAdminUser = isAdmin();
  const isNormalUser = isUser();

  return (
    <div style={{ padding: '20px', backgroundColor: '#f5f5f5', minHeight: '100vh' }}>
      <h2>权限测试页面</h2>
      <div style={{ marginBottom: '20px' }}>
        <p><strong>当前用户手机号：</strong>{userPhone || '未登录'}</p>
        <p><strong>用户角色：</strong>{userRole}</p>
        <p><strong>是否为管理员：</strong>{isAdminUser ? '是' : '否'}</p>
        <p><strong>是否为普通用户：</strong>{isNormalUser ? '是' : '否'}</p>
      </div>
      
      <div style={{ marginBottom: '20px' }}>
        <h3>权限说明：</h3>
        <ul>
          <li>管理员(18332266897)：可以访问所有功能</li>
          <li>普通用户：只能访问首页和极速问诊</li>
        </ul>
      </div>

      <div>
        <h3>测试功能：</h3>
        <Button 
          color="primary" 
          onClick={() => window.location.href = '/index'}
          style={{ marginRight: '10px', marginBottom: '10px' }}
        >
          返回首页
        </Button>
        <Button 
          color="success" 
          onClick={() => window.location.href = '/Wenzhen'}
          style={{ marginRight: '10px', marginBottom: '10px' }}
        >
          极速问诊
        </Button>
        <Button 
          color="warning" 
          onClick={() => window.location.href = '/Yuyue'}
          style={{ marginRight: '10px', marginBottom: '10px' }}
        >
          预约挂号
        </Button>
        <Button 
          color="danger" 
          onClick={() => window.location.href = '/shopping'}
          style={{ marginRight: '10px', marginBottom: '10px' }}
        >
          商城
        </Button>
      </div>
    </div>
  );
};

export default PermissionTest;
